{extend name="layout"}


{block name="title"}task{/block}

{block name="page_name"}<h3 class="page-title">task</h3>{/block}

{block name="header_nav"}
{$breadcrumb}
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

{/block}

{block name="filter"}{/block}


{block name="body"}
<span id="userId" hidden>{$userId}</span>
<div class="layui-table-box">
    <table class="layui-table layui-form" lay-skin="nob" id="task"></table>
</div>

<script>

    layui.use('table', function () {
        const table = layui.table;
        // let url = "{:url('getTask')}";
        let userId = $('#userId').text();
        table.render({
            elem: '#task'
            , height: 800
            , url: '/api/selfApi/getMyTask?userId=' + userId //数据接口
            , page: true //开启分页
            , cellMinWidth: 120
            , text: {
                none: '暂无领取任务'
            }
            , cols: [[ //表头
                {field: 'task_name', title: '任务名', width: 150, sort: true, fixed: 'left'}
                , {field: 'task_lv', title: '任务等级', width: 100}
                , {field: 'task_profit', title: '任务收益', width: 150, sort: true}
                , {field: 'task_type', title: '任务类型', width: 152}
                , {field: 'task_description', title: '任务描述', width: 250}
                , {
                    title: '任务开始时间', width: 250, templet: d => {
                        let timestamp = d.task_start_time
                        let time = new Date(timestamp * 1000);
                        time = time.toLocaleDateString() + ' ' + time.toLocaleTimeString();
                        return time;
                    }
                }
                , {
                    title: '任务完成时间', width: 250, templet: d => {
                        let time, timestamp = '';
                        if((timestamp = d.task_complete_time) == null) {
                            time = '---';
                        }else {
                            time = new Date(timestamp * 1000);
                            time = time.toLocaleDateString() + ' ' + time.toLocaleTimeString();
                        }
                        return time;
                    }
                }
                , {
                    title: '任务状态', width: 100, templet: function (d) {
                        console.log(d.task_status);
                        if (d.task_status === 1) {
                            return '<span style="color: #FF5722">未完成</span>';
                        } else if (d.task_status === 2) {
                            return '<span style="color: #2D93CA">待审核</span>';
                        } else {
                            return '<span style="color: #339911">已完成</span>';
                        }
                    }
                }
                // ,{align: 'center', title: '操作', width: 178, templet: function (d) {
                //         // return '<a href="'+'url'+'?id='+d.id+'"  class="layui-btn layui-btn-sm" target="_self" " ">提交审核</a>';
                //         if(d.task_status === 1) {
                //             return '<a href="#"  class="layui-btn layui-btn-sm" target="_self" " ">提交审核</a>';
                //         }else{
                //             return '<span  class="" target="_self" " ">已获取收益'+d.task_profit+'</span>';
                //         }
                //
                //     }
                // }
            ]],

        });

    });

</script>
{/block}